 // 坑 1 top 丢失
 // 坑 2 样式覆盖
 // 坑 3 样式保留
 // 坑 4 如何返回

.index {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ededed;
}
 .cross {
   width: 100px;
   height: 100px;
   position: relative;

   .line {
     width: 100px;
     height: 20px;
     border-radius: 10px;
     background: orange;
     position: absolute;
     transition: all 0.5s;

     &:nth-child(1) {
       top: 0;
       transform: rotate(0deg);
     }

     &:nth-child(2) {
       top: 40px;
     }

     &:nth-child(3) {
       top: 80px;
       transform: rotate(0deg);
     }
   }

   &.first .line {
     &:nth-child(1) {
       top: 40px;
     }

     &:nth-child(2) {
       opacity: 1;
     }

     &:nth-child(3) {
       top: 40px;
     }
   }


   &.second .line {
     &:nth-child(1) {
       transform: rotate(45deg);
     }

     &:nth-child(2) {
       opacity: 0;
       transform: rotate(360deg);
     }

     &:nth-child(3) {
       transform: rotate(-45deg);
     }
   }
 }